<template>
  <picker
    v-if="isEdit"
    class="input"
    :mode="mode"
    :range="field.options"
    @change="onChange"
  >
    <view class="picker">{{ localValue || `请选择${field.label}` }}</view>
  </picker>
  <text v-else class="value">{{ localValue }}</text>
</template>

<script>
export default {
  props: {
    value: [String, Number],
    field: Object,
    isEdit: Boolean,
  },
  data() {
    return {
  		mode:field.type?field.type:'selector'
  	};  
  },
  
  data() {
  	return {
  		localValue: this.value // 初始化本地副本
  	}
  },
  
  watch: {
  	value(newVal) {
  		this.localValue = newVal // 当prop变化时更新本地值
  	}
  },
  
  created() {
  	;
	console.log("value",value);
  },
  methods: {
    onChange(e) {
	  // 触发事件
	  this.$emit('update-value', this.field.options[e.detail.value]); 
    },
  },
};
</script>

<style scoped>
.picker {
  flex: 2;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: #333;
}

.value {
  flex: 2;
  font-size: 14px;
  color: #333;
}
</style>